<template>
  <layout-container :menu-data="menuData">
    <template slot="menuHead">
      <div style="height: 50px"></div>
    </template>
    <template slot="header-user">
      <ul class="user-nav">
        <li class="nav-item">
          <Dropdown>
            <span class="text">
              Admin
              <Icon type="md-contact" />
            </span>
            <DropdownMenu slot="list">
              <DropdownItem>驴打滚</DropdownItem>
              <DropdownItem>炸酱面</DropdownItem>
              <DropdownItem disabled>豆汁儿</DropdownItem>
              <DropdownItem>冰糖葫芦</DropdownItem>
              <DropdownItem divided>北京烤鸭</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
      </ul>
    </template>
  </layout-container>
</template>
<script>
export default {
  data() {
    return {
      menuData: [
        {
          name: "Dashborad",
          url: "/dashboard",
          children: []
        },
        {
          name: "List Example",
          url: "",
          children: [
            {
              name: "List Example 1",
              url: "/list/example1",
              children: []
            },
            {
              name: "List Example 2",
              url: "/list/example2",
              children: []
            }
          ]
        },
        {
          name: "系统管理",
          url: "",
          children: [
            {
              name: "用户管理",
              url: "/setting/user",
              children: []
            },
            {
              name: "菜单权限管理",
              url: "/setting/permission",
              children: []
            },
            {
              name: "角色权限管理",
              url: "/setting/role",
              children: []
            }
          ]
        },
        {
          name: "用户管理",
          url: "/user/list",
          children: []
        },
        {
          id: "9753acc2f558449cbe21403ce4c982eb",
          parentId: null,
          icon: "icon",
          url: "",
          sort: 1,
          name: "商品管理",
          note: "note",
          children: [
            {
              id: "b45c745d38924c06b9a4db8dedb62042",
              parentId: "9753acc2f558449cbe21403ce4c982eb",
              children: [],
              icon: "icon",
              url: "/goods",
              sort: 1,
              name: "商品列表",
              note: "note"
            }
          ]
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.user-nav {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  .nav-item {
    cursor: pointer;
    .text {
      color: #fff;
    }
  }
}
</style>
